<template>
  <div>
    <el-form :model="rscOrder" label-width="160px">
      <el-form-item :label="$t('operations.rscName')">
        <span>{{ chosenItem.id }}</span>
      </el-form-item>
      <el-form-item :label="$t('operations.front')">
        <el-select v-model="rscOrder.before_rscs" multiple @change="handleCOChange($event)"
          @remove-tag="handleCORemoveTag">
          <el-option v-for="item in resources_id" :key="item.id" :label="item.id" :value="item.id"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('operations.back')">
        <el-select v-model="rscOrder.after_rscs" multiple @change="handleCOChange($event)"
          @remove-tag="handleCORemoveTag">
          <el-option v-for="item in resources_id" :key="item.id" :label="item.id" :value="item.id"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="handleClick">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="handleOk">{{ $t('common.confirm') }}</el-button>
    </div>
  </div>
</template>
<script>
import { updateOrder } from "@/api/resource";

export default {
  props: ['chosenItem', 'rscOrder', 'resources_id'],
  data() {
    return {

    }
  },
  methods: {
    handleCOChange(option) {
      let arr = [...option];

      for (let i in arr) {
        for (let j in this.resources_id) {
          if (arr[i] == this.resources_id[j].id) {
            this.resources_id[j].disabled = true;
          }
        }
      }
    },
    handleCORemoveTag(option) {
      for (let i in this.resources_id) {
        if (option == this.resources_id[i].id) {
          this.resources_id[i].disabled = false;
        }
      }
    },
    handleClick() {
      this.$emit('cancel')
    },
    handleOk() {
      let id = this.chosenItem.id;
      let data = this.rscOrder;
      updateOrder({ id, data }).then((res) => {
        this.$message.success("location update success");
        this.$emit('cancel')
      });
    },
  }
}


</script>
<style lang="scss" scoped></style>